<template>
  <div>
    <div class="bigbox">
      <div class="header-son">
        <p @click="fun()">&lt;</p>
        <span>话费余额</span>
      </div>
    </div>

    <div class="box">
        <div class="box-son">
            <img src="img/wangimg/imgs/ye-2.gif" alt="">
        </div>
    </div>

    <div class="box-son2">
        <img src="img/wangimg/imgs/ye-1.gif" alt="">
    </div>

    <ul class="box-son3">
        <li>
            <img src="img/wangimg/imgs/qq-1.gif" alt="">
            <p>QQ超级会员</p>
            <span>首月仅一分</span>
        </li>
        <li>
            <img src="img/wangimg/imgs/qq-2.gif" alt="">
            <p>套餐七折起</p>
            <span>全球通+12个月会员</span>
        </li>
        <li>
            <img src="img/wangimg/imgs/qq-3.gif" alt="">
            <p>会员+流量</p>
            <span>首月仅一分</span>
        </li>
        <li>
            <img src="img/wangimg/imgs/qq-4.gif" alt="">
            <p>套餐变更</p>
            <span>首月仅一分</span>
        </li>
        <li>
            <img src="img/wangimg/imgs/qq-5.gif" alt="">
            <p>头条抖音包</p>
            <span>首月仅一分</span>
        </li>
        <li>
            <img src="img/wangimg/imgs/qq-6.gif" alt="">
            <p>装宽带</p>
            <span>首月仅一分</span>
        </li>

    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  text-decoration-line: none;
  list-style-type: none;
}
.bigbox {
  width: 100%;
  height: 2.24rem;
  background-color: #4e90ff;
}
.header-son {
  width: 100%;
  height: 0.48rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.2rem;
  color: #fff;
  background-color: rgba(255, 255, 255, 0);
}
.header-son p {
  position: absolute;
  left: 0.1rem;
  font-size: 0.26rem;
}
.header-son span {
  font-size: 0.22rem;
}

.box{
    width: 100%;height: 100%;
    background-color: #f6f6f6;
}
.box-son{
    width: 90%;
    height: 2.4rem;
    position: absolute;
    top: 0.5rem;left: 0.17rem;
    border-radius: 15px;
}
.box-son img{
    width: 100%;height: 100%;
}
.box-son2{
    width: 90%;
    height: 0.74rem;
    margin: auto;
    margin-top: 0.8rem;
}
.box-son2 img{
    width: 100%;height: 100%;
}
.box-son3{
    width: 90%;
    height: 2.2rem;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: white;
}
.box-son3 li{
    width: 1.04rem;
    height: 1.04rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}
.box-son3 li img{
    width: 0.45rem;
    height: 0.45rem;
}
.box-son3 li span{
    color: gray;
    font-size: 0.1rem;
}
.box-son3 li  p{
    font-size: 0.14rem;
    color: #000;
}
</style>
